<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>选项卡</title>
	<style>
		#div1 .active {
			background: yellow;
		}

		#div1 div {
			width: 200px;
			height: 200px;
			background: #CCC;
			border: 2px solid #999;
			display: none;
		}
	</style>
	<script>
		window.onload = function ()
		{
			var oDiv = document.getElementById("div1");
			var aBtn = oDiv.getElementsByTagName("input");
			var aDiv = oDiv.getElementsByTagName("div");
			for (var i = 0; i < aBtn.length; i++)
			{
				aBtn[i].index = i;
				aBtn[i].onclick = function ()
				{
					for (var i = 0; i < aBtn.length; i++)
					{
						aBtn[i].className = "";
						aDiv[i].style.display = "none";
					}
//			alert(this.value);
					this.className = "active";
					aDiv[this.index].style.display = "block";
				}
			}

		}
	</script>

</head>
<body>
<div id="div1">
	<input class="active" type="button" value="国际"/>
	<input type="button" value="国内"/>
	<input type="button" value="社会"/>
	<input type="button" value="财经"/>
	<input type="button" value="娱乐"/>
	<input type="button" value="地方"/>
	<div style="display: block">11111</div>
	<div>22222</div>
	<div>33333</div>
	<div>44444</div>
	<div>55555</div>
	<div>66666</div>
</div>

</body>
</html>